/*
 * @Description:
 * @Version: 2.0
 * @Autor: jl.g
 * @Date: 2023-04-05 13:15:13
 * @LastEditors: jl.g
 * @LastEditTime: 2023-08-17 09:40:11
 */
import React, { useState, useEffect, useRef } from "react";
import { Button, Modal, Space } from "antd";
import { useSelector } from "react-redux";
import { getProducts, currencyConfigList } from "@/api/commodity";
import { messageFn, formatAmount } from "@/utils";
import flow from "../../../public/assets/imgs/flow.png";
import hot from "../../../public/assets/imgs/hot.png";
import check from "../../../public/assets/imgs/check.png";
import arrowDown from "../../../public/assets/imgs/arrowDown.png";
import vipIcon from "../../../public/assets/imgs/sysVipFlag.svg";
import diamondVipIcon from "../../../public/assets/imgs/diamondVipIcon.svg";
import infoIcon from "../../../public/assets/imgs/info.svg";
import PayBox from "./components/PayBox";
import styles from "./index.module.less";
import "./index.css";
const Commodity = () => {
  // 用户信息列表
  const sysConfig = useSelector((state) => state.sysConfig);
  console.log(sysConfig, "sysConfigsysConfig");
  // 商品列表
  const [commodityList, setCommodityList] = useState([]);
  const [activeCommodityitem, setActiveCommodityitem] = useState(null);
  // 流量商品列表
  const [currencyList, setCurrencyList] = useState([]);
  const [activecurrencyItem, setActivecurrencyItem] = useState(null);

  // 支付弹窗
  const payBoxRef = useRef(null);

  // 选择会员卡
  const changeActiveCommodityitem = (data) => {
    setActiveCommodityitem(data);
  };

  // 选择流量包
  const changeActivecurrencyItem = (data) => {
    setActivecurrencyItem(data);
  };

  /**
   * @description: 选中商品
   * @return {*}
   * @author: jl.g
   */
  const chooseCard = (data, productType) => {
    if (sysConfig.aliPayEnable || sysConfig.wechatPayEnable) {
      payBoxRef.current.getPage(data, productType);
    } else {
      Modal.info({
        title: "尊敬的用户您好",
        content: (
          <div
            dangerouslySetInnerHTML={{
              __html: sysConfig.closePayNotice,
            }}
          ></div>
        ),
      });
    }
  };

  /**
   * @description: 获取商品列表
   * @return {*}
   * @author: jl.g
   */

  const getProductsFn = async () => {
    try {
      let res = await getProducts();
      if (res.code === 200) {
        const { result } = res;
        setCommodityList(result);
        if (result.length) {
          setActiveCommodityitem(result[0]);
        }
      } else {
        messageFn({
          type: "error",
          content: res.message,
        });
      }
    } catch (error) {
      console.log(error);
    }
  };

  // 获取流量商品列表
  const currencyConfigListFn = async () => {
    try {
      let res = await currencyConfigList();
      if (res.code === 200) {
        const { result } = res;
        setCurrencyList(result);
        if (result.length) {
          setActivecurrencyItem(result[0]);
        }
      } else {
        messageFn({
          type: "error",
          content: res.message,
        });
      }
    } catch (error) {
      console.log(error);
    }
  };

  useEffect(() => {
    getProductsFn();
    currencyConfigListFn();
  }, []);
  return (
    <div className={styles.commodity}>
      <div className="content">
        <div className="content_item">
          <div className="content_item-title">
            <img className="content_item-title-icon" src={vipIcon} alt="" />
            会员卡
          </div>

          <div className="content_item-warp">
            {commodityList.map((v) => (
              <div
                onClick={() => changeActiveCommodityitem(v)}
                key={v.memberId}
                className={`content_item-warp-item ${
                  activeCommodityitem.memberId === v.memberId
                    ? "content_item-warp-item-active"
                    : ""
                }`}
              >
                {v.recommend ? (
                  <img className="hotIcon" src={hot} alt="" />
                ) : (
                  ""
                )}
                {/* 选中状态 */}
                {activeCommodityitem.memberId === v.memberId ? (
                  <img className="checkIcon" src={check} alt="" />
                ) : (
                  ""
                )}

                <div className="count">{v.cardName}</div>
                <div className="priceBpx">
                  <span className="newPrice">￥{formatAmount(v.amount)}</span>
                  {v.lineAmount ? (
                    <span className="oldPrice">
                      ￥{formatAmount(v.lineAmount)}
                    </span>
                  ) : (
                    ""
                  )}
                </div>
                <div className="desc">
                  尊享权益 <img className="infoIcon" src={infoIcon} alt="" />
                </div>

                {/* 悬浮展示详情 */}
                <div className="content_item-info-warp">
                  <img className="arrowDownIcon" src={arrowDown} alt="" />
                  <div className="content_item-info-box">
                    <div className="content_item-info-title">
                      <img
                        className="diamondVipIcon"
                        src={diamondVipIcon}
                        alt=""
                      />
                      尊享权益
                    </div>

                    <div className="content_item-info-context">
                      {v.rightList.map((infoItem, index) => (
                        <div key={index}>
                          {index + 1 + "." + infoItem.rightsDesc}
                        </div>
                      ))}
                    </div>
                  </div>
                </div>

                {/* 移动端展示会员详情 */}
                <div className="mobile_content_item-info-warp">
                  <div className="content_item-info-box">
                    <div className="content_item-info-context">
                      {v.rightList.map((infoItem, index) => (
                        <div key={index}>
                          {index + 1 + "." + infoItem.rightsDesc}
                        </div>
                      ))}
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </div>

          {commodityList.length ? (
            <div className="content_item-tools">
              <span className="content_item-label">实付</span>
              <span className="content_item-price">
                ¥{activeCommodityitem?.amount}
              </span>
              <span
                className="content_item-btn"
                onClick={() => chooseCard(activeCommodityitem, 10)}
              >
                立即购买
              </span>
            </div>
          ) : (
            ""
          )}
        </div>

        <div className="content_item">
          <div className="content_item-title">
            <img className="content_item-title-icon" src={flow} alt="" />
            流量包
            <span className="productInfo">(此类商品购买后永久有效)</span>
          </div>

          <div className="content_item-warp">
            {currencyList.map((v) => (
              <div
                onClick={() => changeActivecurrencyItem(v)}
                key={v.id}
                className={`content_item-warp-item ${
                  activecurrencyItem.id === v.id
                    ? "content_item-warp-item-active"
                    : ""
                }`}
              >
                {v.recommend ? (
                  <img className="hotIcon" src={hot} alt="" />
                ) : (
                  ""
                )}
                {activecurrencyItem.id === v.id ? (
                  <img className="checkIcon" src={check} alt="" />
                ) : (
                  ""
                )}

                <div className="coinName">{sysConfig?.currencyName || ""}</div>
                <div className="count">{formatAmount(v.currencyCount)} 个</div>
                <div className="priceBpx">
                  <span className="newPrice">￥{v.currencyAmount}</span>
                  {v.lineAmount ? (
                    <span className="oldPrice">￥{v.lineAmount}</span>
                  ) : (
                    ""
                  )}
                </div>
              </div>
            ))}
          </div>

          {currencyList.length ? (
            <div className="content_item-tools">
              <span className="content_item-label">实付</span>
              <span className="content_item-price">
                ¥{activecurrencyItem?.currencyAmount}
              </span>
              <span
                className="content_item-btn"
                onClick={() => chooseCard(activecurrencyItem, 20)}
              >
                立即购买
              </span>
            </div>
          ) : (
            ""
          )}
        </div>
      </div>

      <PayBox ref={payBoxRef}></PayBox>
    </div>
  );
};

export default Commodity;
